import 'package:flutter/material.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:get/get.dart';
import 'package:xmshop/app/serives/LongFonts.dart';
import 'package:xmshop/app/serives/screenAdapter.dart';
import '../../../serives/httpsClient.dart';
import '../controllers/home_controller.dart';
import '../../../serives/keepAliveWrapper.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);

  // 头部
  Widget _appBar() {
    return Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: Obx(() => AppBar(
              leading: controller.isMi.value
                  ? const Icon(
                      LongFonts.xiaomi,
                      color: Colors.white,
                    )
                  : const Text(""),
              leadingWidth:
                  controller.isMi.value ? ScreenAdapter.width(120) : 0,
              title: AnimatedContainer(
                width: controller.flag.value
                    ? ScreenAdapter.width(800)
                    : ScreenAdapter.width(620),
                height: ScreenAdapter.height(96),
                duration: const Duration(milliseconds: 600),
                onEnd: () {
                  if (!controller.flag.value) {
                    controller.showMi();
                  }
                },
                decoration: BoxDecoration(
                    color: const Color.fromRGBO(246, 246, 246, 1),
                    borderRadius: BorderRadius.circular(30)),
                child: InkWell(
                  onTap: () {
                    Get.toNamed("/search-page");
                  },
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.fromLTRB(
                                ScreenAdapter.width(34),
                                0,
                                ScreenAdapter.width(10),
                                0),
                            child: const Icon(Icons.search),
                          ),
                          Text(
                            "手机",
                            style: TextStyle(
                                color: Colors.black54,
                                fontSize: ScreenAdapter.fontSize(32)),
                          ),
                        ],
                      ),
                      Container(
                        margin: EdgeInsets.only(right: ScreenAdapter.width(32)),
                        child: const Icon(
                          Icons.qr_code_scanner,
                          color: Color.fromRGBO(184, 175, 164, 1),
                        ),
                      )
                    ],
                  ),
                ),
              ),
              centerTitle: true,
              backgroundColor:
                  controller.flag.value ? Colors.white : Colors.transparent,
              elevation: 0,
              actions: [
                IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.qr_code,
                      color:
                          controller.flag.value ? Colors.black87 : Colors.white,
                    )),
                IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.message,
                      color:
                          controller.flag.value ? Colors.black87 : Colors.white,
                    )),
              ],
            )));
  }

  // 顶部swiper
  Widget _topSwiper() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(682),
      child: Obx(() => Swiper(
            itemBuilder: (context, index) {
              return Image.network(
                HttpsClient.replaceUri(controller.swiperList[index].pic),
                fit: BoxFit.fill,
              );
            },
            itemCount: controller.swiperList.length,
            pagination: const SwiperPagination(builder: SwiperPagination.rect),
            autoplay: true,
            loop: true,
          )),
    );
  }

// 分类
  Widget _category() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(470),
      // color: Colors.pink,
      child: Obx(() => Swiper(
            itemBuilder: (context, index) {
              return GridView.builder(
                  itemCount: 10,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 5,
                    mainAxisSpacing: ScreenAdapter.width(20),
                    crossAxisSpacing: ScreenAdapter.width(20),
                  ),
                  itemBuilder: (context, i) {
                    return Column(
                      children: [
                        Container(
                          alignment: Alignment.center,
                          width: ScreenAdapter.height(140),
                          height: ScreenAdapter.height(140),
                          child: Image.network(
                            HttpsClient.replaceUri(
                                controller.CategoryList[index * 10 + i].pic),
                            fit: BoxFit.fitHeight,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(
                              0, ScreenAdapter.height(4), 0, 0),
                          child: Text(
                              controller.CategoryList[index * 10 + i].title!,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(34))),
                        )
                      ],
                    );
                  });
            },
            itemCount: controller.CategoryList.length ~/ 10,
            pagination: SwiperPagination(
                margin: const EdgeInsets.all(0.0),
                builder: SwiperCustomPagination(
                    builder: (BuildContext context, SwiperPluginConfig config) {
                  return ConstrainedBox(
                    constraints:
                        BoxConstraints.expand(height: ScreenAdapter.height(20)),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: Align(
                            alignment: Alignment.center,
                            child: const RectSwiperPaginationBuilder(
                              color: Colors.black12,
                              activeColor: Colors.black54,
                            ).build(context, config),
                          ),
                        )
                      ],
                    ),
                  );
                })),
          )),
    );
  }

// 热销
  Widget _bestSelling() {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(
              ScreenAdapter.width(30),
              ScreenAdapter.height(20),
              ScreenAdapter.width(30),
              ScreenAdapter.height(20)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("热销臻选",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: ScreenAdapter.fontSize(46))),
              Text("更多手机推荐 >",
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(38)))
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20), 0,
              ScreenAdapter.width(20), ScreenAdapter.height(20)),
          child: Row(
            children: [
              Expanded(
                  child: SizedBox(
                height: ScreenAdapter.height(738),
                child: Obx(() => Swiper(
                    itemBuilder: (context, index) {
                      return Image.network(
                        HttpsClient.replaceUri(
                            controller.bestSellingSwiperList[index].pic),
                        fit: BoxFit.fill,
                      );
                    },
                    itemCount: controller.bestSellingSwiperList.length,
                    autoplay: true,
                    loop: true,
                    pagination: SwiperPagination(
                        margin: const EdgeInsets.all(0.0),
                        builder: SwiperCustomPagination(builder:
                            (BuildContext context, SwiperPluginConfig config) {
                          return ConstrainedBox(
                            constraints: BoxConstraints.expand(
                                height: ScreenAdapter.height(36)),
                            child: Row(
                              children: <Widget>[
                                Expanded(
                                  child: Align(
                                    alignment: Alignment.center,
                                    child: const RectSwiperPaginationBuilder(
                                      color: Colors.black12,
                                      activeColor: Colors.black54,
                                    ).build(context, config),
                                  ),
                                )
                              ],
                            ),
                          );
                        })))),
              )),
              SizedBox(width: ScreenAdapter.width(20)),
              Expanded(
                  child: SizedBox(
                height: ScreenAdapter.height(738),
                child: Obx(() => Column(
                      children:
                          controller.sellingPlist.asMap().entries.map((entrie) {
                        var value = entrie.value;
                        return Expanded(
                            flex: 1,
                            child: Container(
                              color: const Color.fromRGBO(246, 246, 246, 1),
                              margin: EdgeInsets.fromLTRB(
                                  0,
                                  0,
                                  0,
                                  entrie.key == 2
                                      ? 0
                                      : ScreenAdapter.height(20)),
                              child: Row(
                                children: [
                                  Expanded(
                                    flex: 3,
                                    child: Column(
                                      children: [
                                        SizedBox(
                                            height: ScreenAdapter.height(20)),
                                        Text("${value.title}",
                                            style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(38),
                                                fontWeight: FontWeight.bold)),
                                        SizedBox(
                                            height: ScreenAdapter.height(20)),
                                        Text("${value.subTitle}",
                                            style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(
                                                        28))),
                                        SizedBox(
                                            height: ScreenAdapter.height(20)),
                                        Text("${value.price}元",
                                            style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34)))
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    flex: 2,
                                    child: Padding(
                                      padding: EdgeInsets.all(
                                          ScreenAdapter.height(8)),
                                      child: Image.network(
                                          HttpsClient.replaceUri(value.pic),
                                          fit: BoxFit.cover),
                                    ),
                                  )
                                ],
                              ),
                            ));
                      }).toList(),
                    )),
              ))
            ],
          ),
        )
      ],
    );
  }

// 瀑布流
  Widget _bestGoods() {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(
              ScreenAdapter.width(30),
              ScreenAdapter.height(40),
              ScreenAdapter.width(30),
              ScreenAdapter.height(20)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                "省心优惠",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: ScreenAdapter.fontSize(46)),
              ),
              Text(
                "全部优惠 >",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: ScreenAdapter.fontSize(38)),
              )
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.all(ScreenAdapter.width(26)),
          color: const Color.fromRGBO(246, 246, 246, 1),
          child: Obx(() => MasonryGridView.count(
                crossAxisCount: 2,
                mainAxisSpacing: ScreenAdapter.width(26),
                crossAxisSpacing: ScreenAdapter.width(26),
                itemCount: controller.bestPlist.length,
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      Get.toNamed("/product-content",
                          arguments: {"id": controller.bestPlist[index].sId});
                    },
                    child: Container(
                      padding: EdgeInsets.all(ScreenAdapter.width(20)),
                      decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(ScreenAdapter.width(10)),
                          color: Colors.white),
                      child: Column(
                        children: [
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            child: Image.network(
                              HttpsClient.replaceUri(
                                  controller.bestPlist[index].sPic),
                              fit: BoxFit.cover,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            width: double.infinity,
                            child: Text(
                              "${controller.bestPlist[index].title}",
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(36),
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            width: double.infinity,
                            child: Text(
                              "${controller.bestPlist[index].subTitle}",
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(32)),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            width: double.infinity,
                            child: Text(
                              "¥${controller.bestPlist[index].price}",
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(32),
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              )),
        )
      ],
    );
  }

// 内容
  Widget _homePage() {
    return Positioned(
      top: -40,
      left: 0,
      right: 0,
      bottom: 0,
      child: ListView(
        controller: controller.scrollController,
        children: [
          _topSwiper(),
          SizedBox(
            width: ScreenAdapter.width(1080),
            height: ScreenAdapter.height(92),
            child: Image.asset(
              "assets/images/xiaomiBanner.png",
              fit: BoxFit.cover,
            ),
          ),
          _category(),
          _bestSelling(),
          _bestGoods(),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return KeepAliveWrapper(
        child: Scaffold(
      body: Stack(
        children: [_homePage(), _appBar()],
      ),
    ));
  }
}
